<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue组件使用细节之ref和$refs第二步</title>
    <script src="../../vue.js"></script>
</head>

<body>
    <div id="app">
        <counter ref="haha" @change='heheiClick'></counter> <!-- 3. 组件的标签设定两个,然后给标签设置不同ref,不在组件中设置就是因为多个组件要操作不同的dom,然后绑定相同的change事件 -->
        <counter ref="hehe" @change='heheiClick'></counter>
        <div>{{total}}</div> <!-- 4. 这里是上面两个值的和 -->
    </div>

    <script>
        /* 
            1. 这一步的目的是实现单击数字,然后值++,然后有两个数字,都可以单击然后++,还有一个total是两个数字的和,跟着数字的值变动
        */
        Vue.component('counter', { // 2. 设定一个组件,然后给这个组件设定一个单击事件
            template: '<div @click="divClick">{{number}}</div>',
            data() {
                return {
                    number: 0 // 5. 设置初始值为0
                }
            },
            methods: { // 6. 设置组件的单击事件,每单击一次被单击的组件的值++
                divClick: function () {
                    this.number++;
                    this.$emit('change'); // 7. 出发当前组件的change事件,因为不同组件的值无法在不同的组件中同时获取,所以这里就不能传参数
                }
            },
        });
        const app = new Vue({
            el: '#app',
            data: {
                total: 0 // 8. 设定总和的初始值为0
            },
            methods: {
                heheiClick: function () { // 9. 组件出发change事件后调用这个方法,然后根据$refs根据组件的ref获取组件,然后再获取组建的number属性值,相加之后复制给total
                    this.total = this.$refs.haha.number + this.$refs.hehe.number
                }
            },
        })
    </script>
</body>

</html>